<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{
        padding:0;
        margin:0;
    }
    .header{
        height: 50px;
        background: #333333;
    }
    .header .h_content{
        width: 1100px;
        margin: 0 auto;
    }
    h1{
        height: 50px;
        background: url("images/bd_logo1_31bdc765.png") no-repeat;
        width: 300px;
        background-size: 110px;
        text-indent: -9999px;
        float: left;
    }
    .header ul{
        list-style: none;
        float: right;
    }
    .header li {
        float: left;
        line-height: 50px;
        margin-left: 10px;
    }
    .header li a{
        outline: none;
        text-decoration: none;
        color: white;
    }
    .content{
        background: #dddddd;
        padding-top: 20px;
    }
    .content .tent1{
        width: 1100px;
        margin: 0 auto;
        background: white;
        padding: 20px;
    }
    .content .tent2,.tent3,.tent4{
        width: 1100px;
        margin: 20px auto;
        background: white;
        padding: 20px;
    }
    .tent3 table{
        width: 100%;
    }
    .tent3 table th{
        text-align: left;
        background: #333333;
        color: white;
    }
    .tent3 table tr:last-child{
        background: #cccccc;
    }
    .tent4 h2{
        border-left:2px solid #ccc;
    }
    .tent4 table{

    }
    .tent4 table tr>td:first-of-type{
        width: 1000px;
        text-align: right;
    }
    .tent4 table tr>td:nth-of-type(2){

        width: 60%;
    }
    .tent4 table tr>td:nth-of-type(2) p{
        color: #ccc;
    }
    .tent4 table tr:last-child>td:first-of-type{
        vertical-align: top;
    }
    .tent4 input[type="submit"]{
        width: 100%;
        background: #3355d0;
        height: 40px;
        border-radius: 10px;
        color: white;
    }
</style>
</head>
<body>
<div class="header">
    <div class="h_content">
        <h1>百度</h1>
        <ul>
            <li><a href="#">导航链接一</a></li>
            <li><a href="#">导航链接二</a></li>
            <li><a href="#">导航链接三</a></li>
            <li><a href="#">导航链接四</a></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="tent1">
        <h2>文章一级标题</h2>
        <h2>文章二级标题</h2>
        <p>文章作者 发布时间</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落 <br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,</p>
        <img src="images/ad-pic.png" alt="">
        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,</p>
        <img src="images/ad-pic.png" alt="">
        <ul>
            <li>项目列表一</li>
            <li>项目列表二</li>
            <li>项目列表三</li>
        </ul>
    </div>
    <div class="tent2">
        <h2>图片</h2>
        <dl>
            <dt>好看的图片</dt>
            <dd><img src="images/ad-pic.png" alt=""></dd>
        </dl>
        <dl>
            <dt>好看的图片</dt>
            <dd><img src="images/ad-pic.png" alt=""></dd>
        </dl><dl>
        <dt>好看的图片</dt>
        <dd><img src="images/ad-pic.png" alt=""></dd>
    </dl><dl>
        <dt>好看的图片</dt>
        <dd><img src="images/ad-pic.png" alt=""></dd>
    </dl><dl>
        <dt>好看的图片</dt>
        <dd><img src="images/ad-pic.png" alt=""></dd>
    </dl><dl>
        <dt>好看的图片</dt>
        <dd><img src="images/ad-pic.png" alt=""></dd>
    </dl>
    </div>
    <div class="tent3">
        <h2>最后一篇文章标题</h2>
        <p>文章作者 文章发表时间</p>
        <ol>
            <li>排名1</li>
            <li>排名2</li>
            <li>排名3</li>
        </ol>
        <table border="1" cellspacing="0px">
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="2">1000</td>
            </tr>
        </table>
    </div>
    <div class="tent4">
        <div class="aside">
            <h2>这里以后是一个侧栏,这是侧栏标题</h2>
            <form action="">
                <table>
                    <tr>
                        <td><label for="mail">请输入邮箱:</label></td>
                        <td><input type="text" id="mail">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><p>邮箱地址请按格式输入</p></td>
                    </tr>
                    <tr>
                        <td><label for="pass">请输入密码:</label></td>
                        <td><input type="password" id="pass">
                        </td>
                    </tr>
                    <tr>
                        <td><label for="pass2">请重复输入密码:</label></td>
                        <td><input type="password" id="pass2">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><p>密码为6到16位英文数字</p></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td><label><input type="radio">男</label>&nbsp;<label><input type="radio">女</label>
                        </td>
                    </tr>
                    <tr>
                        <td><label for="address">城市:</label></td>
                        <td>
                            <select name="" id="address">
                                <option value="北京">北京</option>
                                <option value="广州">广州</option>
                                <option value="上海">上海</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td><label><input type="radio">运动</label><label><input type="radio">艺术</label><label><input type="radio">科学</label>
                        </td>
                    </tr>
                    <tr>
                        <td><label>个人描述</label></td>
                        <td>
                            <textarea name=""  cols="100" rows="6" placeholder="这是一个多行输入框,输入您的个人描述"></textarea>
                        </td>
                    </tr>
                </table>
                <input type="submit" value="确认提交">
            </form>
        </div>
    </div>
</div>

</body>
</html>